import React, { useState, useEffect } from "react";
import {
  Space,
  Radio,
  Button,
  Drawer,
  Form,
  TreeSelect,
  DatePicker,
  Input,
  message,
  Image,
  Spin,
} from "antd";
import { devicena } from "../../../api/index";


interface PropInterface {
  id: number;
  open: boolean;
  onCancel: () => void;
}
export const DeviceUpdate: React.FC<PropInterface> = ({
  id,
  open,
  onCancel,
}) => {
  const [form] = Form.useForm();
  const [init, setInit] = useState(true);
const [deviceTree, setDeviceTree] = useState<any>([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setInit(true);
    if (id === 0) {
      return;
    }
    if (open) {
      getDetail();
    }
  }, [form, id, open]);


  const getDetail = () => {
    devicena.getDeviceTypeById(id).then((res: any) => {
      form.setFieldsValue({
        deviceType: res.data.data.deviceType,
        deviceName: res.data.data.deviceName,
        deviceNameCode: res.data.data.deviceNameCode,
      });
      setInit(false);
    });

    devicena.getAllDeviceType().then((res: any) => {
      if (res.code == 0) {
        var arr=[];
        for (let i = 0; i < res.data.data.length; i++) {
          arr.push({ title: res.data.data[i].deviceType, value: res.data.data[i].deviceType })
          setDeviceTree(arr)
        }
      }
    })
  };

  const onFinish = (values: any) => {
    if (loading) {
      return;
    }
    values.id = id
    setLoading(true);
    devicena
      .updateDeviceTypeById(
        values
      )
      .then((res: any) => {
        setLoading(false);
        message.success("保存成功！");
        onCancel();
      })
      .catch((e) => {
        setLoading(false);
      });
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };
  return (
    <>
      {open ? (
        <Drawer
          title="编辑设备类型"
          onClose={onCancel}
          maskClosable={false}
          open={true}
          footer={
            <Space className="j-r-flex">
              <Button onClick={() => onCancel()}>取 消</Button>
              <Button
                loading={loading}
                onClick={() => form.submit()}
                type="primary"
              >
                确 认
              </Button>
            </Space>
          }
          width={634}
        >
          {init && (
            <div className="float-left text-center mt-30">
              <Spin></Spin>
            </div>
          )}
          <div
            className="float-left mt-24"
            style={{ display: init ? "none" : "block" }}
          >
            <Form
              form={form}
              name="update-basic"
              labelCol={{ span: 5 }}
              wrapperCol={{ span: 19 }}
              initialValues={{ remember: true }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              autoComplete="off"
            >
               <Form.Item
                label="设备类型"
                name="deviceType"
                rules={[{ required: true, message: "请选择设备类型!" }]}
              >
                <TreeSelect
                  showCheckedStrategy={TreeSelect.SHOW_ALL}
                  allowClear
                  style={{ width: 424 }}
                  treeData={deviceTree}
                  placeholder="请选择设备类型"
                  treeDefaultExpandAll
                />
              </Form.Item>

              <Form.Item
                label="设备名称"
                name="deviceName"
                rules={[{ required: true, message: "请在此处输入设备名称!" }]}
              >
                <Input
                  style={{ width: 424 }}
                  placeholder="请在此处输入设备名称"
                  allowClear
                />
              </Form.Item>

              <Form.Item
                label="设备名称编码"
                name="deviceNameCode"
                rules={[{ required: true, message: "请在此处输入设备名称编码!" }]}
              >
                <Input
                  style={{ width: 424 }}
                  placeholder="请在此处输入设备名称编码"
                  allowClear
                />
              </Form.Item>
            </Form>
          </div>
        </Drawer>
      ) : null}
    </>
  );
};
